<template>
	<view>		
				<uni-section title="基本用法" type="line">
					<view class="example">
						<!-- 基础用法，不包含校验规则 -->
						<uni-forms ref="baseForm" :model="baseFormData" labelWidth="80px">
							<uni-forms-item label="客户名称" required>
								<uni-easyinput v-model="baseFormData.customer" placeholder="请输入客户名称" />
							</uni-forms-item>
							<uni-forms-item label="所属城市" >
								<uni-easyinput v-model="baseFormData.address" placeholder="请输入所属城市" />
							</uni-forms-item>
							
							<uni-forms-item label="联系电话" >
								<uni-easyinput v-model="baseFormData.phone" placeholder="请输入联系电话" />
							</uni-forms-item>
							
							<uni-forms-item label="是否拜访?" >
								<view class="dis-inline-block" style="font-size: 26px;" @tap="isChat_change">
									<radio-group class="dis-inline-block" style="transform:scale(0.6)">
											<radio value="1" color="#20a53a" :checked="isChat_status" style="padding-right: 20px;" >是</radio>
											<radio value="0" color="#20a53a"  >否</radio>
									</radio-group>
								</view>
							</uni-forms-item>
							
							<uni-forms-item label="已有系统?" >
								<view class="dis-inline-block" style="font-size: 26px;" @tap="isUseSys_change">
									<radio-group class="dis-inline-block" style="transform:scale(0.6)">
											<radio value="1" color="#20a53a" :checked="isUseSys_status" style="padding-right: 20px;" >是</radio>
											<radio value="0" color="#20a53a"  >否</radio>
									</radio-group>
								</view>
							</uni-forms-item>
							
							<uni-forms-item label="系统情况" >
								<uni-easyinput v-model="baseFormData.useSysInfo" placeholder="请输入系统使用情况" />
							</uni-forms-item>
							
							<uni-forms-item label="添加微信?" >
								<view class="dis-inline-block" style="font-size: 26px;" @tap="isWechat_change">
									<radio-group class="dis-inline-block" style="transform:scale(0.6)">
											<radio value="1" color="#20a53a" :checked="isWechat_status" style="padding-right: 20px;" >是</radio>
											<radio value="0" color="#20a53a"  >否</radio>
									</radio-group>
								</view>
							</uni-forms-item>
							
							<uni-forms-item label="意向客户?" >
								<view class="dis-inline-block" style="font-size: 26px;" @tap="isAreday_change">
									<radio-group class="dis-inline-block" style="transform:scale(0.6)">
											<radio value="1" color="#20a53a" :checked="isAreday_status" style="padding-right: 20px;" >是</radio>
											<radio value="0" color="#20a53a"  >否</radio>
									</radio-group>
								</view>
							</uni-forms-item>
							
							<uni-forms-item label="备注">
								<uni-easyinput type="textarea" v-model="baseFormData.remark" placeholder="请输入备注" />
							</uni-forms-item>
							<uni-forms-item label="拜访时间">
								<uni-datetime-picker type="datetime" return-type="timestamp"
									v-model="billDate"  />
							</uni-forms-item>
							
							<uni-forms-item label="批发市场" >
								<uni-easyinput v-model="baseFormData.market" placeholder="请输入批发市场" />
							</uni-forms-item>
							
							
							<uni-forms-item label="拜访图片">
								<view class="content">
									<view class="images" v-for="(item,index) in tempFiles" :key="index">
										<image @click="previewImg(index)" class="img" :src="item.path" mode="aspectFill"></image>
										<view class="remove" @click="removeImg(index)">x</view>
									</view>
									<view class="files" @click="addFiles" v-if="tempFiles.length<9">
										<view class="add">+</view>
									</view>
								</view>
								
							</uni-forms-item>
			
						</uni-forms>
						
						
						<view :class="'cart-buy-nav oh wh-auto br-t bg-white '+(source_type != 'cart' ? 'bottom-line-exclude' : '')">
						    <view class="cart-nav-base fl single-text padding-left">
						    </view>
						    <view class="fr cart-nav-submit padding-top padding-bottom padding-horizontal-main">
						        <button @tap="save" class="bg-main cr-white text-size-lg" type="default" hover-class="none">保存</button>
						    </view>
						</view>
					</view>
				</uni-section>
	</view>
</template>

<script>
	const app = getApp();
	 import base64 from '../../common/js/lib/base64.js';
	export default {
		data() {
			return {
				salRemark:"",
				billDate:"",
				showCalendar:false,
				picture:"",
				isChat_status:true,//是否拜访
				isUseSys_status:true,//是否已使用系统
				isWechat_status:true,//是否添加了微信
				isAreday_status:true,//是否意向客户
				user: null,
				tempFiles:[],
				baseFormData:{},
			}
		},
		onLoad() {
			this.getCurrentTime();
		},
		methods: {
			getCurrentTime() {
			      const now = new Date();
			      const year = now.getFullYear();
			      const month = now.getMonth() + 1;
			      const day = now.getDate();
			      const hour = now.getHours();
			      const minute = now.getMinutes();
			      const second = now.getSeconds();
			      
			      this.billDate = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			save(){
				if( typeof this.baseFormData.customer=='undefined'){
					app.globalData.showToast('客户名称为必填!!!');
					return;
				}

				this.user =app.globalData.get_user_cache_info();	
				this.baseFormData.picture =this.tempFiles;
				
				//上传并保存
				uni.showLoading({
				    title: '保存中...'
				});
				var data ={};
				data['customer'] =this.baseFormData.customer;
				data['isChat'] =this.isChat_status?1:0;
				data['isUseSys'] =this.isUseSys_status?1:0;
				data['isWechat'] =this.isWechat_status?1:0;
				data['isAreday'] =this.isAreday_status?1:0;
				// data['picture'] =this.baseFormData.picture;
				data['market'] =this.baseFormData.market;
				data['useSysInfo'] =this.baseFormData.useSysInfo;
				data['address'] =this.baseFormData.address;
				data['phone'] =this.baseFormData.phone;
				
				data['billDate'] =this.billDate;
				data['remark'] =this.baseFormData.remark;
				data['picture'] =this.picture;
				
				console.log("---data---",data)
				uni.request({
				    url: app.globalData.get_request_url("saveCrmVisit"),
				    method: 'POST',
				    data: data,
					header:{
						'Tenant-Id':this.user.role.tenantId,
						'X-Access-Token':this.user.token,
					},
				    dataType: 'json',
				    success: res => {
				        uni.hideLoading();
						console.log("res",res)
				        if (res.data.code == 0) {
							app.globalData.showToast('保存成功。');
							uni.navigateTo({
							    url: '/pages/sal/salPriceList'
							});
				        }
				    },
				    fail: () => {
				        uni.hideLoading();
				        this.setData({
				            buy_submit_disabled_status: false
				        });
				        app.globalData.showToast('服务器请求出错');
				    }
				});
				
				
			},
			isChat_change(e) {
			    this.setData({
			        isChat_status: !this.isChat_status
			    });
			},
			
			isUseSys_change(e) {
			    this.setData({
			        isUseSys_status: !this.isUseSys_status
			    });
			},
			
			isWechat_change(e) {
			    this.setData({
			        isWechat_status: !this.isWechat_status
			    });
			},
			
			isAreday_change(e) {
			    this.setData({
			        isAreday_status: !this.isAreday_status
			    });
			},
			
			
			openCalendar(){
				this.showCalendar =true;
			},
			change(e) {
			    console.log(e);
				this.billDate =e.result;
			},
			// 删除图片
			removeImg(index) {
				this.tempFiles.splice(index, 1)
			},
			// 预览图片
			previewImg(index) {
				// console.log(this.tempFiles);
				// 过滤
				let imgUrl = this.tempFiles.map(item => item.path)
				// console.log(imgUrl);
				uni.previewImage({
					current: index, //点击的索引值
					urls: imgUrl,
				})
			},
			addFiles(){
				
				this.user =app.globalData.get_user_cache_info();
				
				uni.chooseImage({
					count: 1, // 最大选择的张数，默认是九张，可以不写
					success: res => {
						
						const tempFilePaths = res.tempFilePaths[0];
						console.log("--tempFilePaths--",tempFilePaths);
				        uni.uploadFile({
				            url: app.globalData.get_request_url("uploadImg"),
							header: {
								'Content-Type': 'multipart/form-data',
								'Tenant-Id':this.user.role.tenantId,
								'X-Access-Token':this.user.token,
							},
				            filePath: tempFilePaths,
				            name: 'file',
							success: (myres) => {
								console.log("---myres---",myres)
								if(myres.statusCode == 200){
									var jsonObject = JSON.parse(myres.data);
									var imageUrl = jsonObject.msg;

									if(imageUrl.indexOf('上传成功')!= -1){
										var picture =imageUrl.substring(4);
										console.log("picture",picture)
										this.picture += picture +",";
									}else{
										app.globalData.showToast('上传失败，请重新上传。');
									}
								}
							}
				            
				        });

						
						console.log(res);
						// 接受选择的图片数组
						let oldImg = [...this.tempFiles, ...res.tempFiles]
						// console.log(oldImg);
						let newImg = oldImg.slice(0, 9)
						// console.log(newImg);
						// 在赋值前进行截取
						this.tempFiles = newImg
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.example {
		padding: 15px;
		background-color: #fff;
	}
	.upload {
			position: absolute;
			top: -50rpx;
			right: 20rpx;
			width: 120rpx;
			height: 60rpx;
			line-height: 60rpx;
			background-color: #04c062;
			color: white;
			border-radius: 10rpx;
			text-align: center;
			font-size: 30rpx;
		}
	
		.content {
			padding: 30rpx;
			margin-top: 70rpx;
			display: flex;
			flex-wrap: wrap;
	
			.files {
				width: 200rpx;
				height: 200rpx;
				background-color: #f7f7f7;
				color: #6d6d6d;
				font-size: 100rpx;
				font-weight: 100;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 10rpx;
			}
	
			.images {
				width: 200rpx;
				height: 200rpx;
				margin: 10rpx;
				position: relative;
	
				.img {
					width: 100%;
					height: 100%;
				}
	
				.remove {
					width: 50rpx;
					height: 50rpx;
					background-color: #f7f7f7;
					position: absolute;
					top: -5rpx;
					right: -10rpx;
					text-align: center;
					opacity: .5;
					border-radius: 0 0 0 50rpx;
					color: #c5c5c5;
				}
			}
		}
		
		/**
		* 操作导航
		*/
		.cart-buy-nav {
		    position: fixed;
		    z-index: 2;
		    left: 0;
		    bottom: 0;
		    /* #ifdef H5 || APP */
		    bottom: var(--window-bottom);
		    /* #endif */
		}
		.cart-buy-nav,
		.cart-nav-base {
		    height: 100rpx;
		    line-height: 100rpx;
		}
</style>
